<template>
  <div class="WorkList">
    <el-table :data="tableDate" border style="width: 100%" v-loading="loading">
        <el-table-column prop="id"  label="用户ID" align="center"></el-table-column>
        <el-table-column prop="userId"  label="所属班级" align="center"></el-table-column>
        <el-table-column prop="title"  label="作业名称" align="center"></el-table-column>
        <el-table-column prop="completed_text"  label="完成情况" align="center"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 30,50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
     </el-pagination>
    </div>
</template>
<script>
import { getWorkData } from '@/utils/table.js'
export default{
  name:'WorkList',
  data(){
    return{
      tableDate:[],
      total:0,
      currentPage:1,
      pageSize:10,
      loading:true,
    }
  },
  //craeted(){
   created(){
     // getWorkData(this,'/works',{page:this.currentPage,size:this.pageSize},['completed'])
     this.getWorkDataAndPage()
  },
  methods:{
     // 改变每页显示几条  这里的分页是后端的分页方式
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        //getWorkData(this,'/works',{page:this.currentPage,size:val},['completed'])
        this.getWorkDataAndPage()
     },
     // 改变页数 第几页
     handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        //getWorkData(this,'/works',{page:val,size:this.pageSize},['completed'])
        this.getWorkDataAndPage()
     },
     // 方法合并
     getWorkDataAndPage(){
        getWorkData(this,'/works',{page:this.currentPage,size:this.pageSize},['completed'])
     }
   }
}
</script>


<style lang="scss" scoped>
.WorkList{
.el-pagination{
    margin-top:20px;
  }
}
</style>